<template>
	<view class="container" v-if="loadEnd">
		<form @submit="modify">
			<view class="info-item">
				<view class="info-item-title">头像</view>
				<view class="head-pic">
					<button open-type="chooseAvatar" @chooseavatar="bindchooseavatar">
						<image :src="avatar || '/static/login/user.png'" alt="" mode="aspectFill"></image>
						<view style="flex: 1;"></view>
					</button>
				</view>
			</view>
			<view class="info-item">
				<view class="info-item-title">昵称</view>
				<view class="nickname"><input type="nickname" name="nickname" :value="nickname" placeholder="请输入昵称"/>
				</view>
			</view>
			<block v-if="first == 'false' && oldPhone != ''" >
				<view class="info-item">
					<view class="info-item-title">旧手机号</view>
					<view class="old-phone">{{oldPhone}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">新手机号</view>
					<view class="info-item-input"><input type="number" placeholder="请输入手机号码" placeholder-class="placeholder" maxlength="11" v-model="newPhone"/></view>
					<view class="countdown" v-if="countdown && countdown > 0">{{countdown}}秒</view>
					<view class="send-code" @click="getCode()" v-else>发送验证码</view>	
				</view>
				<view class="info-item">
					<view class="info-item-title">验证码</view>
					<view class="info-item-input-captcha"><input type="text" placeholder="请输入验证码" placeholder-class="placeholder" maxlength="6" v-model="captcha"/></view>
				</view>
			</block>
			<view class="confirm-btn">
				<button class="confirm-world" form-type="submit">确定</button>
				<view class="safe-padding"></view>
			</view>
		</form>
	</view>
</template>

<script>
	var app = getApp()
	import ikz from '@/pages/Common/tools.js'
	export default {
		data() {
			return {
				loadEnd:false,
				first: false,
				avatar: '',
				nickname: '',
				newPhone:'',
				oldPhone:'',
				captcha:'',
				// 验证码
				captcha: "",
				// 验证码倒计时
				countdown: 0,
				// 定时器
				interval: null,
			}
		},
		onLoad(options) {
			this.getPhone()
			// 等待0.5秒.显示页面
			setTimeout(()=>
				this.loadEnd = true
			,500)
			this.first = options.first
			if (options.first == 'true') {
				uni.setNavigationBarTitle({
					title: '设置信息',
				})
			} else {
				uni.setNavigationBarTitle({
					title: '修改信息',
				})
				if (uni.getStorageSync('user_info')) {
					this.avatar = uni.getStorageSync('user_info').avatar || ''
					this.nickname = uni.getStorageSync('user_info').nickname || ''
				}
			}
		},
		methods: {
			// 获取手机号
			getPhone(){
				var path = '/xyb/user_wechat/mobile';
				var data = {};
				ikz.get(path, data, res => {
					if (res.statusCode == 200) {
						this.oldPhone = res.data.data.mobile
						console.log("旧手机号是",this.oldPhone);
					} else {
						uni.showModal({
							title: '提示',
							content: '服务器繁忙，请稍后再试',
							showCancel: false,
							success: function(res) {}
						});
					}
					
				});
			},
			// 获取验证码 
			getCode(){
				if(this.newPhone == ''){
					uni.showToast({
						title:"请先填写手机号后获取验证码",
						icon:"none",
						duration:2000,
					})
					return
				}
				
				var path = '/sms/send';
				var data = {mobile:this.newPhone};
				ikz.requestPost(path, data, res => {
					if (res.data.code == 1) {
						uni.showToast({
							title:"验证码已发送",
							icon:"none",
							duration:2000,
						})
						clearInterval(this.interval)
						this.countdown = 60
						this.interval = setInterval(() => {
							if (this.countdown <= 1) {
								clearInterval(this.interval)
								this.countdown = 0
							} else this.countdown--
						}, 1000)		
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:"none",
							duration:2000,
						})
					}
					
				});
			},
			bindchooseavatar(val) {
				uni.showLoading({
					title: '上传中',
					mask: true,
				})
				uni.uploadFile({
					url: app.globalData.adminPath + '/common/upload',
					filePath: val.detail.avatarUrl,
					name: 'file',
					formData: {
						token: uni.getStorageSync('local_user_session'),
					},
					success: uploadFileRes => {
						if (uploadFileRes.code == 401) {
							console.log(uni.getStorageSync('local_user_session'));
						} else {
							this.avatar = app.globalData.adminImgPath + JSON.parse(uploadFileRes.data).data.url
						}
					},
					complete: () => {
						uni.hideLoading()
					},
				})
			},
			modify(e) {
				this.nickname = e.detail.value.nickname
				let title = ''
				if (!this.avatar) {
					title = '请上传头像'
				} else if (!this.nickname) {
					title = '请输入昵称'
				} 
				if (title) {
					uni.showToast({
						title,
						icon: 'none',
						duration:2000,
					})
				} else {
					let path = '/xyb/user_wechat/update_nickname_avatar'
					let data = {
						token: uni.getStorageSync('local_user_session'),
						nickname: this.nickname,
						avatar: this.avatar,
						mobile:this.newPhone,
						captcha:this.captcha
					}
					if (this.avatar == uni.getStorageSync('user_info').avatar) {
						data.avatar = ''
					}
					ikz.requestPost(path, data, res => {
						if(res.data.code == 1){
							let title = ''
							if (this.first == 'true') {
								title = '设置成功'
							} else {
								title = '修改成功'
							}
							uni.setStorageSync('user_info', res.data.data.user_info)
							getApp().globalData.mobile = res.data.data.user_info.mobile
							uni.showToast({
								title,
								icon: 'none',
							})
							setTimeout(() => {
								if (this.first == 'true') {
									uni.reLaunch({
										url: '/pages/Home/index',
									})
								} else {
									uni.navigateBack()
								}
							}, 2000)
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:"none",
								duration:2000
							})						
						}	
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {}

	.container {
		.info-item {
			display: flex;
			align-items: center;
			padding: 32rpx;
			background: #ffffff;
			border-bottom: 0.5px #eee solid;

			.info-item-title {
				flex: 1;
				margin-right: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #000000;
			}
			.info-item-input{
				margin-right: 16rpx;
				width: 200rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				
				.placeholder{
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
			.countdown {
					margin-left: 24rpx;
					color: #666;
					font-size: 32rpx;
					line-height: 44rpx;
				}
			.info-item-input-captcha{
				width: 180rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: right;
				
				.placeholder{
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
			.send-code{
				font-size: 28rpx;
				line-height: 40rpx;
				color: #ffc045;
			}
			
			.head-pic {

				button {
					overflow: hidden;
					// display: flex;
					text-align: left;
					padding: 0;
					margin: 0;
					height: 80rpx;
					background-color: #fff;
				}

				button::after {
					border: none;
				}

				image {
					overflow: hidden;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.nickname {
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: right;

			
			}
			.old-phone{
				font-size: 28rpx;
				line-height: 40rpx;
				
				
			}
		}

		.confirm-btn {
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			padding: 16rpx;
			width: 100%;
			text-align: center;

			.confirm-world {
				color: #fff;
				background: #ffc045;
				border-radius: 44rpx;
			}

			.confirm-world::after {
				border: none;
			}
		}
	}
</style>